<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		body
		{
			margin:30px;
			background-color:#E9E9E9;
		}

		div.polaroid
		{
			width:294px;
			padding:10px 10px 20px 10px;
			border:1px solid #BFBFBF;
			background-color:white;
			/* Add box-shadow */
			box-shadow:2px 2px 3px #aaaaaa;
		}

		div.rotate_left
		{
			float:left;
			-ms-transform:rotate(7deg); /* IE 9 */
			-moz-transform:rotate(7deg); /* Firefox */
			-webkit-transform:rotate(7deg); /* Safari and Chrome */
			-o-transform:rotate(7deg); /* Opera */
			transform:rotate(7deg);
		}

		div.rotate_right
		{
			float:left;
			-ms-transform:rotate(-8deg); /* IE 9 */
			-moz-transform:rotate(-8deg); /* Firefox */
			-webkit-transform:rotate(-8deg); /* Safari and Chrome */
			-o-transform:rotate(-8deg); /* Opera */
			transform:rotate(-8deg);
		}
	</style>

</head>
<body>
<div class="polaroid rotate_left">
	<img src="" alt="郁金香" width="284" height="213" />
	<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
	<img src="../i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
	<p class="caption">2010年上海世博会，中国馆。</p>
</div>

</body>
</html>
